<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>All function</title>
    <link rel="stylesheet" href="ext-4.2.1.883/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.2.1.883/ext-all.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
    Ext.onReady(function () {

//        /**
//         * 添加用户模块
//         */
//        Ext.create('Ext.form.Panel', {
//            title: '添加用户',
//            bodyPadding: 5,
//            width: 300,
//
//            //Ajax请求URL
//            url: 'http://localhost:8080/user/addUser.do',
//
//            layout: 'anchor',
//            defaults: {
//                anchor: '100%'
//            },
//
//            defaultType: 'textfield',
//            //表格区域
//            items: [{
//                fieldLabel: 'username',
//                name: 'username',
//                allowBlank: false
//            }, {
//                fieldLabel: 'password',
//                name: 'password',
//                allowBlank: false
//            }, {
//                fieldLabel: 'email',
//                name: 'email',
//                allowBlank: false
//            }],
//            //添加按钮
//            buttons: [{
//                text: '添加',
//                formBind: true,
//                disabled: true,
//                handler: function () {
//                    var form = this.up('form').getForm();
//                    if (form.isValid()) {
//                        form.submit({
//                            success: function (form, action) {
//                                //Ext.msg.alert(String title,String context)第一个是标题,第二个是内容
//                                Ext.Msg.alert('添加成功', action.result.msg);
//                            },
//                            failure: function (form, action) {
//                                Ext.Msg.alert('添加失败', action.result.msg);
//                            }
//                        });
//                    }
//                }
//            }, {
//                text: '重置',
//                handler: function () {
//                    this.up('form').getForm().reset();
//                }
//            }],
//            renderTo: Ext.getBody()
//        }),

        /**
         * 删除用户模块
         */
        Ext.create('Ext.form.Panel', {
            title: '删除用户',
            bodyPadding: 5,
            width: 300,

            //Ajax-url
            url: 'http://localhost:8080/user/deleteUser.do',

            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },

            defaultType: 'textfield',
            items: [{
                fieldLabel: 'username',
                name: 'username',
                allowBlank: false
            }, {
                fieldLabel: 'password',
                name: 'password',
                allowBlank: false
            }, {
                fieldLabel: 'email',
                name: 'email',
                allowBlank: false
            }],
            buttons: [{
                text: '删除',
                formBind: false,
                disabled: false,
                handler: function () {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            success: function (form, action) {
                                Ext.Msg.alert('删除成功', action.result.msg);
                            },
                            failure: function (form, action) {
                                Ext.Msg.alert('删除失败', action.result.msg);
                            }
                        })
                    }
                    ;
                }
            }, {
                text: '重置',
                handler: function () {
                    this.up('form').getForm().reset();
                }
            }],
            renderTo: Ext.getBody()
        }),

            /**
             * 更新用户模块
             */
            Ext.create('Ext.form.Panel', {
                title: 'updateUserInfo',
                bodyPadding: 5,
                width: 300,

                //AJax-url
                url: 'http://localhost:8080/user/updateUserInfo.do',

                layout: 'anchor',
                defaults: {
                    anchor: '100%'
                },
                //默认xtype
                defaultType: 'textfield',
                //表格区域
                items: [{
                    fieldLabel: 'username',
                    name: 'username',
                    allowBlank: false
                }, {
                    fieldLabel: 'password',
                    name: 'password',
                    allowBlank: false
                }, {
                    fieldLabel: 'email',
                    name: 'email',
                    allowBlank: false
                }],

                //添加按钮
                buttons: [{
                    text: '更新',
                    //formBind 与表单验证有关
                    formBind: false,
                    //disabled为true时,禁用该组件
                    disabled: false,
                    //监听器
                    handler: function () {
                        //up(String selector) 找到上一个ancestor container
                        var form = this.up('form').getForm();
                        //表单是否通过客户端验证
                        if (form.isValid()) {
                            form.submit({
                                success: function (form, action) {
                                    Ext.Msg.alert('更新信息成功', action.result.msg);
                                },
                                failure: function (form, action) {
                                    Ext.Msg.alert('更新信息失败', action.result.msg);
                                }
                            })
                        }
                        ;
                    }
                }, {
                    text: '重置',
                    handler: function () {
                        this.up('form').getForm().reset();
                    }
                }],
                renderTo: Ext.getBody()
            }),
            /**
             * 查询模块
             /**
             * 创立User Model
             */
            Ext.define('User', {
                extend: 'Ext.data.Model',
                fields: ['username', 'password', 'email'
//                    {name: 'username', type: 'string'},
//                    {name: 'password', type: 'string'},
//                    {name: 'email', type: 'string'},
                ]
            });

        /**
         * 创建store容器储存json
         */
        var userStore = Ext.create('Ext.data.Store', {
            model: User,
            storeId: 'userStore1',
            proxy: {
                type: 'ajax',
                url: 'http://localhost:8080/user/selectAll.do',
                async: false,
                reader: {
                    type: 'json',
                    root: 'data'
                }
            },
            autoLoad: true
        });

        var userGrid = Ext.create('Ext.grid.Panel', {
            title: '用户列表',
            store: userStore,
            columns: [
                {header: 'username', dataIndex: 'username'},
                {header: 'password', dataIndex: 'password'},
                {header: 'email', dataIndex: 'email', flex: 1}
            ],
            selType: 'rowmodel',
            plugins: [
                Ext.create('Ext.grid.plugin.RowEditing', {
                    clicksToEdit: 1
                })
            ],
            height: 200,
            width: 400,
            buttons: [{
                text: '刷新',
                handler: function () {
                    userGrid.store.reload();
                }
            },{
                text:'添加用户',
                handler: function () {
                    Ext.create('Ext.window.Window',{
                        title:'添加用户',
                        height:200,
                        width:400,
                        layout:'fit',
                        items:addForm
                    }).show();
                }
            }],
            renderTo: Ext.getBody()
        });
    });

    /**
     * 添加用户模块
     */
    var addForm = Ext.create('Ext.form.Panel', {
        title: '添加用户',
        bodyPadding: 5,
        width: 300,

        //Ajax请求URL
        url: 'http://localhost:8080/user/addUser.do',

        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },

        defaultType: 'textfield',
        //表格区域
        items: [{
            fieldLabel: 'username',
            name: 'username',
            allowBlank: false
        }, {
            fieldLabel: 'password',
            name: 'password',
            allowBlank: false
        }, {
            fieldLabel: 'email',
            name: 'email',
            allowBlank: false
        }],
        //添加按钮
        buttons: [{
            text: '添加',
            formBind: true,
            disabled: true,
            handler: function () {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        success: function (form, action) {
                            //Ext.msg.alert(String title,String context)第一个是标题,第二个是内容

                            Ext.Msg.alert('添加成功', action.result.msg);
                        },
                        failure: function (form, action) {
                            Ext.Msg.alert('添加失败', action.result.msg);
                        }
                    });
                }
            }
        }, {
            text: '重置',
            handler: function () {
                this.up('form').getForm().reset();
            }
        }],
//        renderTo: Ext.getBody()
    });

</script>
</body>
</html>